<template>
  <div>
    <Tool-bar />
    <Type-nav />
    <Main
      :good-list="goodsList"
      :trademark-lists="trademarkList"
      :attr-list="attrsList"
      :search-param="searchParams"
      @removeCategoryName="removeCategoryName"
      @removeKeyword="removeKeyword"
      @changeOrder="changeOrder"
      @pageChange="pageChange"
    />
  </div>
</template>

<script>
import TypeNav from "@/components/content/typeNav/TypeNav.vue";

import ToolBar from "./childComps/toolBar/ToolBar.vue";
import Main from "./childComps/main/Main.vue";

import { mapGetters, mapState } from "vuex";
export default {
  name: "Search",
  components: {
    TypeNav,
    ToolBar,
    Main,
  },
  beforeMount() {
    Object.assign(this.searchParams, this.$route.query, this.$route.params);
  },
  mounted() {
    this.getData();
    this.searchParams.total = this.$store.state.search.searchInfo.totalPages;
  },
  data() {
    return {
      searchParams: {
        //产品相应的id
        category1Id: "",
        category2Id: "",
        category3Id: "",
        //产品的名字
        categoryName: "",
        //搜索的关键字
        keyword: "",
        //排序:初始状态应该是综合/降序
        order: "1:asc",
        //第几页
        pageNo: 8,
        //每一页展示条数
        pageSize: 5,
        //平台属性的操作
        props: [],
        //品牌
        trademark: "",
        total: 0,
      },
      index: String,
    };
  },
  computed: {
    ...mapGetters(["goodsList", "attrsList", "trademarkList"]),
  },
  methods: {
    getData() {
      this.$store.dispatch("getSearchInfo", this.searchParams); //当前getSearchInfo  在调用时至少传入一个参数(空对象)
    },
    // 删除分类的名字
    removeCategoryName() {
      this.searchParams.categoryName = undefined;

      this.searchParams.category1Id = undefined;
      this.searchParams.category2Id = undefined;
      this.searchParams.category3Id = undefined;
      this.getData();

      if (this.$router.params) {
        this.$router.push({ name: "search", params: this.$router.params });
      } else {
        this.$router.push({ name: "search" });
      }
    },
    // 删除关键字
    removeKeyword() {
      this.searchParams.keyword = undefined;

      this.searchParams.category1Id = undefined;
      this.searchParams.category2Id = undefined;
      this.searchParams.category3Id = undefined;
      this.getData();

      // 通知兄弟组件header清除关键字，发送clear事件
      this.$bus.$emit("clear");

      if (this.$router.query) {
        this.$router.push({ name: "search", query: this.$router.query });
      } else {
        this.$router.push({ name: "search" });
      }
    },
    changeOrder(index) {
      this.searchParams.order = index;
      this.getData();
    },
    pageChange(pageNo) {
      this.searchParams.pageNo = pageNo;
      this.getData();
    },
  },
  // 数据监听，监听组件实例身上的属性值的变化
  watch: {
    // 监听路由的信息是否发生变化，如果发生变化，则再次发出请求
    $route(newValue, oldValue) {
      //在发出请求之前整理要发给服务器的参数
      Object.assign(this.searchParams, this.$route.query, this.$route.params);
      // 再次发送ajax请求
      this.getData();
      // 每一次请求完毕，需要将一、二、三级id置空
      this.searchParams.category1Id = undefined;
      this.searchParams.category2Id = undefined;
      this.searchParams.category3Id = undefined;
    },
  },
};
</script>

<style lang='less' scoped>
</style>
